/**
 * The XSplitterPanel user-interface component
 * @class syslib.ui.XSplitterPanel
 * @author Gabriel Ricci
 */
syslib.ui.XSplitterPanel = __class(syslib.ui.VisualTag,
/**
 * @lends syslib.ui.XSplitterPanel
 */ 
{	
	id : null, 
	splitterTable : null, 
	splitter : null, 
	
	prepare : function(){
		// get the tag attributes
		var attributes = this.__attributes;
		
		// set the id
		this.id = (__valid(attributes.id)) ? attributes.id : syslib.element.generateID();
		
		// return
		return true;
	},

	execute : function(){
		// set the main element attributes
		var attributes = syslib.object.extend(this.__attributes, {
			"border" : "0",
			"cellpadding" : "0",
			"cellspacing" : "0",
			"id" : this.id,
			"width" : "100%", 
			"style" : "width: 100%; height: 100%"
		});
		
		// set the splitter attributes
		var splitterAttribs = {
			"border" : "0",
			"width" : "5",
			"valign" : "middle",
			"align" : "center",
			"style" : "border: 1px solid #ccc; background-color: #eee;",
			"bgcolor" : "#eeeeee"
		};

		// create the elements
		var splitterJSON	= ["td", splitterAttribs, "&nbsp;"];
		var elemtJSON 		= ["table", attributes,
			["tbody",
				["tr", {"innerName" : "body"},
					this.__innerHTML
				]
			]
		];
		
		var panel 			= this.createDOM(elemtJSON);
		var splitterObject	= syslib.element.createFromJSON(false, splitterJSON);
		var splitter		= splitterObject.element;

		// set the values on the class
		this.splitterTable = panel;
		this.splitter = splitter;

		// return
		return panel;
	},

	finalize : function(){ 
		return true;
	}
});